
$(function() {
    function createGrid() {
        $("#grdVehicles").jqGrid({
            url: "Vehicles/getVehicles",
            datatype: "json",
            mtype: "POST",
            colNames: ["id", "Nombre", "Tipo", "type", "status", "Volúmen", "Número Económico", "Capacidad", "Marca", "Placas", "Color", "GPS", "Modelo", "Ancho", "Altura", "Profunidad"],
            colModel: [
                {name: "id", width: 40, align: "right", hidden: true},
                {name: "name", index: "name", width: 120},
                {name: "tipo", index: "tipo", width: 80},
                {name: "type", index: "type", width: 80, hidden: true},
                {name: "status", index: "status", width: 80, hidden: true},
                {name: "volume", index: "volume", width: 50, formatter: 'number', formatoptions: {decimalPlaces: 0, suffix: "ft³"}},
                {name: "economic_number", index: "economic_number", width: 30, hidden: true},
                {name: "capacity", index: "capacity", width: 80},
                {name: "trade_mark", index: "trade_mark", width: 80},
                {name: "plate", index: "plate", width: 80, hidden: true},
                {name: "color", index: "color", width: 80, hidden: true},
                {name: "gps", index: "gps", width: 80, hidden: true},
                {name: "model", index: "model", width: 50},
                {name: "width", index: "width", width: 50},
                {name: "height", index: "height", width: 50},
                {name: "deep", index: "deep", width: 50}
            ],
            height: 334,
            width: 600,
            pager: "#pager",
            rowNum: 10,
            rowList: [10, 20, 30],
            sortname: "name",
            sortorder: "asc",
            viewrecords: true,
            gridview: true,
            autoencode: true,
            caption: "Vehículos",
            altRows: true,
            jsonReader: {
                repeatitems: false,
                id: "id",
                root: function(data) {
                    return data[0];
                },
                page: function(data) {
                    return data[1][0].page;
                },
                total: function(data) {
                    return data[1][0].totalpages;
                },
                records: function(data) {
                    return data[1][0].records;
                }
            }
        });
        /*
        $("#grdVehicles").jqGrid('navGrid', '#pager', {
            del: true,
            delfunc: function(rowid) {
                rowData = jQuery('#grdVehicles').jqGrid('getRowData', rowid);
                $('#idreg').val(rowData.name).focus();

            },
            addfunc: function() {
                //editar(null, null);
            },
            editfunc: function(rowid) {
                return;
                //rowData = jQuery('#grdVehicles').jqGrid('getRowData', rowid);
                //$('#name').val(rowData.name);
            }
        });*/
    }
    $(window).on('resize', function(event, ui) {
        // Get width of parent container
        var parWidth = $("#gbox_grdVehicles").parent().width();
        var curWidth = $("#gbox_grdVehicles").width();
        //console.log("span width " + parWidth + " gridWidth " + gWidth);
        var w = parWidth - 1; // Fudge factor to prevent horizontal scrollbars
        if (Math.abs(w - curWidth) > 2)
        {
            //alert("resize to " + width);
            //console.log("span width " + parWidth + " gridWidth " + curWidth);    
            $("#grdVehicles").setGridWidth(w);
            // console.log("new width " + w);
        }
    }).trigger('resize');
    //createGrid();
}); 